<template>
  <el-dialog
      :title="(this.dataForm.id?'':'上传')+dataForm.id+'号检查记录'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      fullscreen>
    <el-form :disabled="loginUser.role === '业主'" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-position="top">
      <el-card>
        <el-form-item label="烟雾检测器" required style="margin-bottom: 0">
          <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">
            全选
          </el-checkbox>
          <div></div>
          <el-checkbox v-model="dataForm.detectorElectricity" @change="handleChange1">烟雾检测器电池电量充足</el-checkbox>
          <el-checkbox v-model="dataForm.detectorSelfTest" @change="handleChange1">烟雾检测器自检功能正常</el-checkbox>
          <el-checkbox v-model="dataForm.detectorNoError" @change="handleChange1">烟雾检测器无故障报警记录</el-checkbox>
        </el-form-item>
      </el-card>

      <el-card>
        <el-form-item label="燃气" required style="margin-bottom: 0">
          <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">
            全选
          </el-checkbox>
          <div></div>
          <el-checkbox v-model="dataForm.gasNoLeakage" @change="handleChange2">燃气管道无泄漏</el-checkbox>
          <el-checkbox v-model="dataForm.gasMeterStatus" @change="handleChange2">燃气表读数正常</el-checkbox>
          <el-checkbox v-model="dataForm.gasAutomaticShutOff" @change="handleChange2">自动切断阀功能有效</el-checkbox>
        </el-form-item>
      </el-card>

      <el-card>
        <el-form-item label="电力系统" required style="margin-bottom: 0">
          <el-checkbox :indeterminate="isIndeterminate3" v-model="checkAll3" @change="handleCheckAllChange3">
            全选
          </el-checkbox>
          <div></div>
          <el-checkbox v-model="dataForm.circuitStatus" @change="handleChange3">电路无故障</el-checkbox>
          <el-checkbox v-model="dataForm.electricalInsulation" @change="handleChange3">电气设备绝缘良好</el-checkbox>
          <el-checkbox v-model="dataForm.standbyPower" @change="handleChange3">备用电源工作正常</el-checkbox>
          <el-checkbox v-model="dataForm.electricalLoad" @change="handleChange3">负载分配合理</el-checkbox>
          <el-checkbox v-model="dataForm.electricalGrounding" @change="handleChange3">接地保护完善</el-checkbox>
        </el-form-item>
      </el-card>

      <el-card>
        <el-form-item label="灭火器" required style="margin-bottom: 0">
          <el-checkbox :indeterminate="isIndeterminate4" v-model="checkAll4" @change="handleCheckAllChange4">
            全选
          </el-checkbox>
          <div></div>
          <el-checkbox v-model="dataForm.extinguisherLeadSealing" @change="handleChange4">灭火器铅封完好</el-checkbox>
          <el-checkbox v-model="dataForm.extinguisherPressure" @change="handleChange4">灭火器压力良好</el-checkbox>
          <el-checkbox v-model="dataForm.extinguisherDamaged" @change="handleChange4">灭火器无明显物理损坏</el-checkbox>
          <el-checkbox v-model="dataForm.extinguisherExpired" @change="handleChange4">灭火器未过期</el-checkbox>
        </el-form-item>
      </el-card>

      <el-form-item label="通道疏通情况，等级0-3，越高越通畅" prop="passageUnblockStatus">
        <div style="text-align: center;">
          <el-input-number :min="0" :max="3" :step="1" step-strictly v-model="dataForm.passageUnblockStatus"></el-input-number>
        </div>
      </el-form-item>
      <el-form-item label="照片" prop="photos">
        <el-upload
            class="photo-uploader"
            :action="uploadURL"
            :headers="{token:loginUser.token}"
            :show-file-list="false"
            :on-success="handlePhotoSuccess">
          <i v-if="!dataForm.photos" class="el-icon-plus photo-uploader-icon el-upload"></i>
          <el-image v-if="dataForm.photos" :src="dataForm.photos" fit="contain" class="photo"></el-image>
        </el-upload>
      </el-form-item>
      <el-form-item label="总结" prop="summary">
        <el-input type="textarea" maxlength="100" show-word-limit v-model="dataForm.summary" placeholder="总结"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button v-if="loginUser.role === '安全检查员'" type="primary" @click="dataFormSubmit()">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      visible: false,

      isIndeterminate1: false,
      isIndeterminate2: false,
      isIndeterminate3: false,
      isIndeterminate4: false,
      checkAll1: false,
      checkAll2: false,
      checkAll3: false,
      checkAll4: false,

      uploadURL: request.defaults.baseURL + '/user/file/upload',
      loginUser: JSON.parse(localStorage.getItem('user')) || {},
      dataForm: {
        id: 0,
        photos: '',
        passageUnblockStatus: 0,
        detectorElectricity: false,
        detectorSelfTest: false,
        detectorNoError: false,
        gasNoLeakage: false,
        gasMeterStatus: false,
        gasAutomaticShutOff: false,
        circuitStatus: false,
        electricalInsulation: false,
        standbyPower: false,
        electricalLoad: false,
        electricalGrounding: false,
        extinguisherLeadSealing: false,
        extinguisherPressure: false,
        extinguisherDamaged: false,
        extinguisherExpired: false,
        summary: ''
      },
      dataRule: {
        inspectorId: [
          {required: true, message: '安全检查员id不能为空', trigger: 'blur'}
        ],
        inspectionDate: [
          {required: true, message: '安全检查时间不能为空', trigger: 'blur'}
        ],
        houseId: [
          {required: true, message: '检查的房屋id不能为空', trigger: 'blur'}
        ],
        deviceId: [
          {required: true, message: '检查的消防设备id不能为空', trigger: 'blur'}
        ],
        photos: [
          {required: true, message: '安全检查的照片地址不能为空', trigger: 'blur'}
        ],
        passageUnblockStatus: [
          {required: true, message: '通道疏通情况不能为空', trigger: 'blur'}
        ],
        detectorElectricity: [
          {required: true, message: '烟雾检测器电池电量充足不能为空', trigger: 'blur'}
        ],
        detectorSelfTest: [
          {required: true, message: '烟雾检测器自检功能正常不能为空', trigger: 'blur'}
        ],
        detectorNoError: [
          {required: true, message: '烟雾检测器无故障报警记录不能为空', trigger: 'blur'}
        ],
        gasNoLeakage: [
          {required: true, message: '燃气管道无泄漏不能为空', trigger: 'blur'}
        ],
        gasMeterStatus: [
          {required: true, message: '燃气表读数正常不能为空', trigger: 'blur'}
        ],
        gasAutomaticShutOff: [
          {required: true, message: '自动切断阀功能有效不能为空', trigger: 'blur'}
        ],
        circuitStatus: [
          {required: true, message: '电路无故障不能为空', trigger: 'blur'}
        ],
        electricalInsulation: [
          {required: true, message: '电气设备绝缘良好不能为空', trigger: 'blur'}
        ],
        standbyPower: [
          {required: true, message: '备用电源工作正常不能为空', trigger: 'blur'}
        ],
        electricalLoad: [
          {required: true, message: '负载分配合理不能为空', trigger: 'blur'}
        ],
        electricalGrounding: [
          {required: true, message: '接地保护完善不能为空', trigger: 'blur'}
        ],
        extinguisherLeadSealing: [
          {required: true, message: '灭火器铅封完好不能为空', trigger: 'blur'}
        ],
        extinguisherPressure: [
          {required: true, message: '灭火器压力良好不能为空', trigger: 'blur'}
        ],
        extinguisherDamaged: [
          {required: true, message: '灭火器无明显物理损坏不能为空', trigger: 'blur'}
        ],
        extinguisherExpired: [
          {required: true, message: '灭火器未过期不能为空', trigger: 'blur'}
        ],
        result: [
          {required: true, message: '检查的结果不能为空', trigger: 'blur'}
        ],
        summary: [
          {required: true, message: '总结不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    //点击全选
    handleCheckAllChange1() {
      this.isIndeterminate1 = false
      if (this.dataForm.detectorElectricity && this.dataForm.detectorSelfTest && this.dataForm.detectorNoError) {
        this.checkAll1 = false
        this.dataForm.detectorElectricity = false
        this.dataForm.detectorSelfTest = false
        this.dataForm.detectorNoError = false
      } else {
        this.checkAll1 = true
        this.dataForm.detectorElectricity = true
        this.dataForm.detectorSelfTest = true
        this.dataForm.detectorNoError = true
      }
    },
    handleCheckAllChange2() {
      this.isIndeterminate2 = false
      if (this.dataForm.gasNoLeakage && this.dataForm.gasMeterStatus && this.dataForm.gasAutomaticShutOff) {
        this.checkAll2 = false
        this.dataForm.gasNoLeakage = false
        this.dataForm.gasMeterStatus = false
        this.dataForm.gasAutomaticShutOff = false
      } else {
        this.checkAll2 = true
        this.dataForm.gasNoLeakage = true
        this.dataForm.gasMeterStatus = true
        this.dataForm.gasAutomaticShutOff = true
      }
    },
    handleCheckAllChange3() {
      this.isIndeterminate3 = false
      if (this.dataForm.circuitStatus && this.dataForm.electricalInsulation && this.dataForm.standbyPower&&this.dataForm.electricalLoad&&this.dataForm.electricalGrounding) {
        this.checkAll3 = false
        this.dataForm.circuitStatus = false
        this.dataForm.electricalInsulation = false
        this.dataForm.standbyPower = false
        this.dataForm.electricalLoad = false
        this.dataForm.electricalGrounding = false
      } else {
        this.checkAll3 = true
        this.dataForm.circuitStatus = true
        this.dataForm.electricalInsulation = true
        this.dataForm.standbyPower = true
        this.dataForm.electricalLoad = true
        this.dataForm.electricalGrounding = true
      }
    },
    handleCheckAllChange4() {
      this.isIndeterminate4 = false
      if (this.dataForm.extinguisherLeadSealing && this.dataForm.extinguisherPressure && this.dataForm.extinguisherDamaged&& this.dataForm.extinguisherExpired) {
        this.checkAll4 = false
        this.dataForm.extinguisherLeadSealing = false
        this.dataForm.extinguisherPressure = false
        this.dataForm.extinguisherDamaged = false
        this.dataForm.extinguisherExpired = false
      } else {
        this.checkAll4 = true
        this.dataForm.extinguisherLeadSealing = true
        this.dataForm.extinguisherPressure = true
        this.dataForm.extinguisherDamaged = true
        this.dataForm.extinguisherExpired = true
      }
    },
    //点击多选项
    handleChange1() {
      if (this.dataForm.detectorElectricity && this.dataForm.detectorSelfTest && this.dataForm.detectorNoError) {
        this.checkAll1 = true
        this.isIndeterminate1 = false
      } else if (this.dataForm.detectorElectricity || this.dataForm.detectorSelfTest || this.dataForm.detectorNoError) {
        this.checkAll1 = false
        this.isIndeterminate1 = true
      } else {
        this.checkAll1 = false
        this.isIndeterminate1 = false
      }
    },
    handleChange2() {
      if (this.dataForm.gasNoLeakage && this.dataForm.gasMeterStatus && this.dataForm.gasAutomaticShutOff) {
        this.checkAll2 = true
        this.isIndeterminate2 = false
      } else if (this.dataForm.gasNoLeakage || this.dataForm.gasMeterStatus || this.dataForm.gasAutomaticShutOff) {
        this.checkAll2 = false
        this.isIndeterminate2 = true
      } else {
        this.checkAll2 = false
        this.isIndeterminate2 = false
      }
    },
    handleChange3() {
      if (this.dataForm.circuitStatus && this.dataForm.electricalInsulation && this.dataForm.standbyPower&&this.dataForm.electricalLoad&&this.dataForm.electricalGrounding) {
        this.checkAll3 = true
        this.isIndeterminate3 = false
      } else if (this.dataForm.circuitStatus || this.dataForm.electricalInsulation || this.dataForm.standbyPower||this.dataForm.electricalLoad||this.dataForm.electricalGrounding) {
        this.checkAll3 = false
        this.isIndeterminate3 = true
      } else {
        this.checkAll3 = false
        this.isIndeterminate3 = false
      }
    },
    handleChange4() {
      if (this.dataForm.extinguisherLeadSealing && this.dataForm.extinguisherPressure && this.dataForm.extinguisherDamaged&& this.dataForm.extinguisherExpired) {
        this.checkAll4 = true
        this.isIndeterminate4 = false
      } else if (this.dataForm.extinguisherLeadSealing || this.dataForm.extinguisherPressure || this.dataForm.extinguisherDamaged|| this.dataForm.extinguisherExpired) {
        this.checkAll4 = false
        this.isIndeterminate4 = true
      } else {
        this.checkAll4 = false
        this.isIndeterminate4 = false
      }
    },

    //照片上传成功后操作
    handlePhotoSuccess(res) {
      if (res.code === 200){
        this.dataForm.photos = res.data
      } else if (res.code === 401) {
        this.$message.error(res.msg)
        this.$router.push('/login')
      } else {
        this.$message.error(res.msg)
      }
    },

    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$request({
            url: `/inspection/inspection/info/${this.dataForm.id}`,
            method: 'get',
            params: {}
          }).then(res => {
            if (res && res.code === 200) {
              this.dataForm.inspectorId = res.inspection.inspectorId
              this.dataForm.inspectionDate = res.inspection.inspectionDate
              this.dataForm.houseId = res.inspection.houseId
              this.dataForm.deviceId = res.inspection.deviceId
              this.dataForm.photos = res.inspection.photos
              this.dataForm.passageUnblockStatus = res.inspection.passageUnblockStatus
              this.dataForm.detectorElectricity = res.inspection.detectorElectricity
              this.dataForm.detectorSelfTest = res.inspection.detectorSelfTest
              this.dataForm.detectorNoError = res.inspection.detectorNoError
              this.dataForm.gasNoLeakage = res.inspection.gasNoLeakage
              this.dataForm.gasMeterStatus = res.inspection.gasMeterStatus
              this.dataForm.gasAutomaticShutOff = res.inspection.gasAutomaticShutOff
              this.dataForm.circuitStatus = res.inspection.circuitStatus
              this.dataForm.electricalInsulation = res.inspection.electricalInsulation
              this.dataForm.standbyPower = res.inspection.standbyPower
              this.dataForm.electricalLoad = res.inspection.electricalLoad
              this.dataForm.electricalGrounding = res.inspection.electricalGrounding
              this.dataForm.extinguisherLeadSealing = res.inspection.extinguisherLeadSealing
              this.dataForm.extinguisherPressure = res.inspection.extinguisherPressure
              this.dataForm.extinguisherDamaged = res.inspection.extinguisherDamaged
              this.dataForm.extinguisherExpired = res.inspection.extinguisherExpired
              this.dataForm.result = res.inspection.result
              this.dataForm.summary = res.inspection.summary

              this.handleChange1()
              this.handleChange2()
              this.handleChange3()
              this.handleChange4()
            }
          })
        }
      })
    },
    //表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$request({
            url: `/inspection/inspection/uploadInspection`,
            method: 'post',
            data: {
              'houseId': this.dataForm.id,
              'photos': this.dataForm.photos,
              'passageUnblockStatus': this.dataForm.passageUnblockStatus,
              'detectorElectricity': this.dataForm.detectorElectricity,
              'detectorSelfTest': this.dataForm.detectorSelfTest,
              'detectorNoError': this.dataForm.detectorNoError,
              'gasNoLeakage': this.dataForm.gasNoLeakage,
              'gasMeterStatus': this.dataForm.gasMeterStatus,
              'gasAutomaticShutOff': this.dataForm.gasAutomaticShutOff,
              'circuitStatus': this.dataForm.circuitStatus,
              'electricalInsulation': this.dataForm.electricalInsulation,
              'standbyPower': this.dataForm.standbyPower,
              'electricalLoad': this.dataForm.electricalLoad,
              'electricalGrounding': this.dataForm.electricalGrounding,
              'extinguisherLeadSealing': this.dataForm.extinguisherLeadSealing,
              'extinguisherPressure': this.dataForm.extinguisherPressure,
              'extinguisherDamaged': this.dataForm.extinguisherDamaged,
              'extinguisherExpired': this.dataForm.extinguisherExpired,
              'summary': this.dataForm.summary
            }
          }).then(res => {
            if (res && res.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

.photo-uploader{
  text-align: center;
}

.photo-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.photo-uploader .el-upload:hover {
  border-color: #409EFF;
}

.photo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 320px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

.photo {
  width: 320px;
  height: 180px;
  display: block;
}
/*解决disabled状态下表单元素太浅看不清*/
/deep/ .el-checkbox.is-disabled .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #409EFF !important;
  border-width: 2px;
}

/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner {
  border-color: #409EFF;
  cursor: default;
  color: #333;
}

/deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label {
  cursor: default;
  color: #333;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  cursor: default;
  color: #333;
}
</style>
